<template>
  <div class="mapIndex">
    <!-- <div class="changeButton">
        <div  class="levelDiv" >
            <span style="color:#db2d2d;padding-top:2vh">4</span><span>座 </span> <br>
            <span> 重大风险企业</span>
        </div>
        <div  class="levelDiv "  >
            <span style="color:#fc7500">133 </span><span>座 </span><br>
            <span> 较大风险企业</span>
        </div>
    </div> -->
    <div class="changeButton changeButton1"  >
        <el-row class="lenged">
            <span class="color color1"></span>
            <span>重大风险区域</span>
        </el-row>
         <el-row class="lenged">
            <span class="color color2"></span>
            <span>较大风险区域</span>
        </el-row>
         <el-row class="lenged">
            <span class="color color3"></span>
            <span>一般风险区域</span>
        </el-row>
         <el-row class="lenged">
            <span class="color color4"></span>
            <span>低风险区域</span>
        </el-row>
         <el-row class="lenged">
            <span class="color color5"></span>
            <span>不在监管范围</span>
        </el-row>

    </div>
    <div class="changeButton changeButton2">
       <div  class="country-title"  >
          <ul class="nameTabs">
              <li><a href="#" @click="initCountry">全国</a></li>
              <li><a href="#" v-if="!country"  @click="initHnanLayer"> 河南省</a></li>
          </ul>
      </div>
    </div>
    <vae-map  v-if="country" :options="options"  id="map_gzsjzn"    @init-map="initMap" ></vae-map>
    <vae-map  v-if="!country" :baseLayers="baseLayers1"  :options="options"  id="map_gzsjzn_prov"    @init-map="initMap" ></vae-map>
    <el-dialog class="ifarmDia" style="width:100vw;height:100vh"  :show-close="false" width="100vw"  top="0"  :modal="false" :append-to-body="true" :visible.sync="outerVisible">
        <el-button type="warning" icon="el-icon-close" circle class="closeButton" @click="outerVisible=false"> </el-button>
         <iframe :src="src" frameborder="0" ref="refed" width="100%" height="100%"></iframe>
  </el-dialog>
  </div>
</template>

<script>
import  geojson from "@/../public/mapJson/100000_full.json"
import  henanJson from "@/../public/mapJson/province/410000.json"
import  henanJsonBounds from "@/../public/mapJson/henanBounds.json"
import Vue from 'vue'
import vpopup from './popup_gzsj.vue'
import mapIcon from "../../../public/images/web-icon.png"

export default {
  name: "map",
  props:{
    vm:null
  },
  data() {
    return {
      options:{
        zoom:3.5,
        zoomDelta:0.2,
      },
      src:"http://192.168.50.53:8083/LRmap/MapDisplay/IndexNew",
      outerVisible:false,
      baseLayers1:[],
      country:true,
      map:null,
      baseLayers:L.layerGroup(),
      markerLayers:L.layerGroup(),
      geojsonMap:L.layerGroup(),
      geojsonMap1:L.layerGroup(),
      allMineData:[],
      levelMap:{
        "01":"#db2d2d ",
        "02":"#fc7500",
        "03":"#e3ca21",
        "04":"#00b4ff",
        "05":"#929292",
      },
      iconFont:{
        "ts":'icon iconfont icon-jiance',//态势预警更名-态势监测
        "sg":'icon iconfont icon-zhuizong',//事故预警更名-事故追踪
        "zh":'icon iconfont icon-tianqi1',//灾害更名-极端天气
        "ws":'icon iconfont icon-wasi',//瓦斯预警-更名-地压冲击
        "jd":'icon iconfont icon-kuangyadiya',//瓦斯预警
        "gz":'icon iconfont icon-fenxi',//感知预警-更名综合分析
      },
      active:"",
      listMap:[
        {name:"态势预警",num:10,type:"ts"},
        {name:"事故预警",num:10,type:"sg"},
        {name:"灾害预警",num:10,type:"zh"},
        {name:"瓦斯量",num:10,type:"ws"},
        {name:"极端天气",num:10,type:"jd"},
      ],
      levelJson:[
        {"code":"140000","name":"山西省","number":"632","level":"04"},
        {"code":"520000","name":"贵州省","number":"541","level":"03"},
        {"code":"150000","name":"内蒙古自治区","number":"451","level":"04"},
        {"code":"610000","name":"陕西省","number":"329","level":"04"},
        {"code":"510000","name":"四川省","number":"312","level":"02"},
        {"code":"230000","name":"黑龙江省","number":"277","level":"04"},
        {"code":"410000","name":"河南省","number":"203","level":"03"},
        {"code":"530000","name":"云南省","number":"203","level":"02"},
        {"code":"650000","name":"新疆维吾尔自治区","number":"153","level":"04"},
        {"code":"370000","name":"山东省","number":"98","level":"02"},
        {"code":"430000","name":"湖南省","number":"94","level":"04"},
        {"code":"620000","name":"甘肃省","number":"71","level":"04"},
        {"code":"130000","name":"河北省","number":"57","level":"04"},
        {"code":"220000","name":"吉林省","number":"44","level":"04"},
        {"code":"640000","name":"宁夏回族自治区","number":"41","level":"04"},
        {"code":"340000","name":"安徽省","number":"40","level":"04"},
        {"code":"350000","name":"福建省","number":"36","level":"04"},
        {"code":"360000","name":"江西省","number":"33","level":"04"},
        {"code":"210000","name":"辽宁省","number":"27","level":"04"},
        {"code":"630000","name":"青海省","number":"18","level":"04"},
        {"code":"420000","name":"湖北省","number":"17","level":"04"},
        {"code":"450000","name":"广西壮族自治区","number":"7","level":"04"},
        {"code":"320000","name":"江苏省","number":"4","level":"04"},
        {"code":"820000","name":"澳门特别行政区","number":"0","level":"05"},
        {"code":"120000","name":"天津市","number":"0","level":"05"},
        {"code":"310000","name":"上海市","number":"0","level":"05"},
        {"code":"330000","name":"浙江省","number":"0","level":"05"},
        {"code":"440000","name":"广东省","number":"0","level":"05"},
        {"code":"460000","name":"海南省","number":"0","level":"05"},
        {"code":"500000","name":"重庆市","number":"0","level":"05"},
        {"code":"540000","name":"西藏自治区","number":"0","level":"05"},
        {"code":"710000","name":"台湾省","number":"0","level":"05"},
        {"code":"810000","name":"香港特别行政区","number":"0","level":"05"},
        {"code":"110000","name":"北京市","number":"0","level":"05"}
      ],
      tileLayer: L.layerGroup(),
      markerList:[
        {
            "org_id": "411481004343",
            "org_name": "新桥煤矿",
            "system_score": 36.90,
            "day_date": "2021-07-10",
            "result_level": "03",
            "v_lat": "33.856667",
            "v_lng": "116.279167",
            "id_at_areacode": "411481",
            "result_level_name": "一般风险",
            "f_name": "河南省-豫东分局"
        }, 
        {
          "org_id": "411702008886",
          "org_name": "吴桂桥煤矿",
          "system_score": 42.80,
          "day_date": "2021-07-10",
          "result_level": "03",
          "v_lat": "32.884722",
          "v_lng": "114.091389",
          "id_at_areacode": "411702",
          "result_level_name": "一般风险",
          "f_name": "河南省-豫东分局"
        }, 
        {
          "org_id": "411201004700",
          "org_name": "梁家洼煤业",
          "system_score": 36.90,
          "day_date": "2021-07-10",
          "result_level": "03",
          "v_lat": "34.000000",
          "v_lng": "111.000000",
          "id_at_areacode": "411221",
          "result_level_name": "一般风险",
          "f_name": "国家煤监局-河南省"
        },
        {
          "org_id": "410323010542",
          "org_name": "新义矿业",
          "system_score": 52.00,
          "day_date": "2021-07-10",
          "result_level": "02",
          "v_lat": "34.785355",
          "v_lng": "112.134068",
          "id_at_areacode": "410323",
          "result_level_name": "较大风险",
          "f_name": "河南省-豫西分局"
        },
        {
          "org_id": "410327005135",
          "org_name": "义络煤业",
          "system_score": 42.30,
          "day_date": "2021-07-10",
          "result_level": "03",
          "v_lat": "34.504722",
          "v_lng": "112.185278",
          "id_at_areacode": "410327",
          "result_level_name": "一般风险",
          "f_name": "河南省-豫西分局"
        },
        {
          "org_id": "411023006771",
          "org_name": "泉店煤矿",
          "system_score": 40.10,
          "day_date": "2021-07-10",
          "result_level": "03",
          "v_lat": "34.07233",
          "v_lng": "113.697829",
          "id_at_areacode": "411024",
          "result_level_name": "一般风险",
          "f_name": "河南省-豫南分局"
        }, 
        {
          "org_id": "410482011042",
          "org_name": "庇山矿",
          "system_score": 53.30,
          "day_date": "2021-07-10",
          "result_level": "02",
          "v_lat": "34.233606",
          "v_lng": "112.783553",
          "id_at_areacode": "410482",
          "result_level_name": "较大风险",
          "f_name": "河南省-豫南分局"
        },
        {
          "org_id": "411481004350",
          "org_name": "顺和煤矿",
          "system_score": 52.00,
          "day_date": "2021-07-10",
          "result_level": "02",
          "v_lat": "34.096814",
          "v_lng": "116.346072",
          "id_at_areacode": "411481",
          "result_level_name": "较大风险",
          "f_name": "河南省-豫东分局"
        }, 
      ],
      fjJson:[{
          "id": "03410200000000",
          "v_shortname": "豫西分局",
          "minecount": 20,
          "result_level": "04",
          "system_score": 6.90,
          "v_lat": "33.851102",
          "v_lng": "111.379895",
          "data": ["三门峡市:411200", "洛阳市:410300", "济源市:419001"]
        }, {
          "id": "03410300000000",
          "v_shortname": "豫北分局",
          "minecount": 15,
          "result_level": "04",
          "system_score": 9.00,
          "v_lat": "35.479612",
          "v_lng": "114.105776",
          "data": ["焦作市:410800", "安阳市:410500", "鹤壁市:410600", "新乡市:410700"]
        }, {
          "id": "03410100000000",
          "v_shortname": "郑州分局",
          "minecount": 54,
          "result_level": "04",
          "system_score": 7.60,
          "v_lat": "34.647301",
          "v_lng": "113.658814",
          "data": ["郑州市:410100"]
        }, {
          "id": "03410500000000",
          "v_shortname": "豫东分局",
          "minecount": 9,
          "result_level": "04",
          "system_score": 6.40,
          "v_lat": "33.8500",
          "v_lng": "116.2822",
          "data": ["信阳市:411500", "商丘市:411400", "驻马店市:411700"]
        }, {
          "id": "03410400000000",
          "v_shortname": "豫南分局",
          "minecount": 31,
          "result_level": "04",
          "system_score": 7.50,
          "v_lat": "33.750701",
          "v_lng": "113.284113",
          "data": ["平顶山市:410400", "许昌市:411000"]
      }],
      colorMap:{},
      colors:["#6f42c1","#007bff","#f0a6c3","#d60ce3","#b4ebb0"],
      mapJson:[
          {"code":610000,"area":"陕西",ch4_mk:370,"CH4_cxmk":71,"CH4_alarm5":74,"CH4_alarm_3":83,"co_xsnum":2702,"co_wq":197,"co_cxmk":74,"co_alarm30":47,"six_num":127,"level":"02","levelName":"较大风险"},
          {"code":520000,"area":"贵州",ch4_mk:797,"CH4_cxmk":55,"CH4_alarm5":13,"CH4_alarm_3":2,"co_xsnum":155,"co_wq":162,"co_cxmk":90,"co_alarm30":5,"six_num":265,"level":"02","levelName":"较大风险"},
          {"code":140000,"area":"山西",ch4_mk:909,"CH4_cxmk":15,"CH4_alarm5":7,"CH4_alarm_3":2,"co_xsnum":128,"co_wq":24,"co_cxmk":38,"co_alarm30":2,"six_num":321,"level":"02","levelName":"较大风险"},
          {"code":530000,"area":"云南",ch4_mk:226,"CH4_cxmk":15,"CH4_alarm5":5,"CH4_alarm_3":0,"co_xsnum":35,"co_wq":2,"co_cxmk":17,"co_alarm30":0,"six_num":82,"level":"03","levelName":"一般风险"},
          {"code":620000,"area":"甘肃",ch4_mk:83,"CH4_cxmk":9,"CH4_alarm5":0,"CH4_alarm_3":0,"co_xsnum":451,"co_wq":70,"co_cxmk":31,"co_alarm30":4,"six_num":32,"level":"03","levelName":"一般风险"},
          {"code":230000,"area":"黑龙江",ch4_mk:295,"CH4_cxmk":9,"CH4_alarm5":3,"CH4_alarm_3":5,"co_xsnum":8,"co_wq":1,"co_cxmk":6,"co_alarm30":0,"six_num":143,"level":"03","levelName":"一般风险"},
          {"code":410000,"area":"河南",ch4_mk:217,"CH4_cxmk":13,"CH4_alarm5":0,"CH4_alarm_3":3,"co_xsnum":68,"co_wq":1,"co_cxmk":10,"co_alarm30":0,"six_num":82,"level":"03","levelName":"一般风险"},
          {"code":150000,"area":"内蒙古",ch4_mk:501,"CH4_cxmk":11,"CH4_alarm5":1,"CH4_alarm_3":1,"co_xsnum":111,"co_wq":2,"co_cxmk":28,"co_alarm30":7,"six_num":203,"level":"03","levelName":"一般风险"},
          {"code":650000,"area":"新疆",ch4_mk:198,"CH4_cxmk":9,"CH4_alarm5":2,"CH4_alarm_3":1,"co_xsnum":46,"co_wq":4,"co_cxmk":11,"co_alarm30":1,"six_num":79,"level":"03","levelName":"一般风险"},
          {"code":510000,"area":"四川",ch4_mk:364,"CH4_cxmk":7,"CH4_alarm5":3,"CH4_alarm_3":0,"co_xsnum":3,"co_wq":0,"co_cxmk":3,"co_alarm30":0,"six_num":135,"level":"03","levelName":"一般风险"},
          {"code":430000,"area":"湖南",ch4_mk:143,"CH4_cxmk":5,"CH4_alarm5":4,"CH4_alarm_3":0,"co_xsnum":2,"co_wq":0,"co_cxmk":1,"co_alarm30":0,"six_num":60,"level":"04","levelName":"低风险"},
          {"code":350000,"area":"福建",ch4_mk:41,"CH4_cxmk":1,"CH4_alarm5":0,"CH4_alarm_3":11,"co_xsnum":75,"co_wq":18,"co_cxmk":15,"co_alarm30":8,"six_num":7,"level":"03","levelName":"一般风险"},
          {"code":630000,"area":"青海",ch4_mk:20,"CH4_cxmk":3,"CH4_alarm5":0,"CH4_alarm_3":0,"co_xsnum":5,"co_wq":3,"co_cxmk":3,"co_alarm30":1,"six_num":8,"level":"04","levelName":"低风险"},
          {"code":450000,"area":"广西",ch4_mk:18,"CH4_cxmk":5,"CH4_alarm5":1,"CH4_alarm_3":0,"co_xsnum":8,"co_wq":0,"co_cxmk":4,"co_alarm30":0,"six_num":6,"level":"04","levelName":"低风险"},
          {"code":220000,"area":"吉林",ch4_mk:53,"CH4_cxmk":2,"CH4_alarm5":0,"CH4_alarm_3":5,"co_xsnum":1,"co_wq":0,"co_cxmk":1,"co_alarm30":0,"six_num":24,"level":"04","levelName":"低风险"},
          {"code":210000,"area":"辽宁",ch4_mk:30,"CH4_cxmk":4,"CH4_alarm5":0,"CH4_alarm_3":1,"co_xsnum":29,"co_wq":0,"co_cxmk":5,"co_alarm30":3,"six_num":25,"level":"04","levelName":"低风险"},
          {"code":360000,"area":"江西",ch4_mk:38,"CH4_cxmk":3,"CH4_alarm5":0,"CH4_alarm_3":0,"co_xsnum":8,"co_wq":1,"co_cxmk":3,"co_alarm30":0,"six_num":33,"level":"04","levelName":"低风险"},
          {"code":420000,"area":"湖北",ch4_mk:17,"CH4_cxmk":2,"CH4_alarm5":0,"CH4_alarm_3":0,"co_xsnum":0,"co_wq":0,"co_cxmk":0,"co_alarm30":0,"six_num":9,"level":"04","levelName":"低风险"},
          {"code":640000,"area":"宁夏",ch4_mk:46,"CH4_cxmk":1,"CH4_alarm5":0,"CH4_alarm_3":0,"co_xsnum":24,"co_wq":21,"co_cxmk":9,"co_alarm30":0,"six_num":41,"level":"04","levelName":"低风险"},
          {"code":320000,"area":"江苏",ch4_mk:5,"CH4_cxmk":0,"CH4_alarm5":0,"CH4_alarm_3":0,"co_xsnum":172,"co_wq":54,"co_cxmk":5,"co_alarm30":0,"six_num":12,"level":"04","levelName":"低风险"},
          {"code":130000,"area":"河北",ch4_mk:59,"CH4_cxmk":0,"CH4_alarm5":0,"CH4_alarm_3":0,"co_xsnum":131,"co_wq":5,"co_cxmk":10,"co_alarm30":0,"six_num":69,"level":"04","levelName":"低风险"},
          {"code":340000,"area":"安徽",ch4_mk:44,"CH4_cxmk":0,"CH4_alarm5":0,"CH4_alarm_3":0,"co_xsnum":49,"co_wq":33,"co_cxmk":15,"co_alarm30":6,"six_num":75,"level":"04","levelName":"低风险"},
          {"code":370000,"area":"山东",ch4_mk:100,"CH4_cxmk":0,"CH4_alarm5":0,"CH4_alarm_3":0,"co_xsnum":50,"co_wq":0,"co_cxmk":20,"co_alarm30":3,"six_num":60,"level":"04","levelName":"低风险"},
          ],
       bt: {"code":"","area":"新疆兵团",ch4_mk:30,"CH4_cxmk":1,"CH4_alarm5":0,"CH4_alarm_3":0,"co_xsnum":3,"co_wq":0,"co_cxmk":2,"co_alarm30":0,"six_num":29,"level":"04","levelName":"低风险"},
     
    }
  },
  created(){
      // "豫西分局": ["三门峡市:411200", "洛阳市:410300", "济源市:419001"]
      //  "豫北分局": ["焦作市:410800", "安阳市:410500", "鹤壁市:410600", "新乡市:410700"]
      //  "郑州市": ["郑州市:410100"]
      //   "豫南分局": ["平顶山市:410400", "许昌市:411000"]
    this.colorMap={
       // "豫西分局"
        "411200":this.colors[0],
        "410300":this.colors[0],
        "419001":this.colors[0],
         // "豫北分局"
         "410800":this.colors[1],
        "410500":this.colors[1],
        "410600":this.colors[1],
        "410700":this.colors[1],
         // "郑州市"
        "410100":this.colors[2],
          // "豫东分局"
        "411500":this.colors[3],
        "411400":this.colors[3],
        "411700":this.colors[3],
          // "豫东分局"
        "410400":this.colors[4],
        "411000":this.colors[4],
      }
  },
  methods:{
    clearLayers(){
      this.markerLayers.clearLayers();
      this.geojsonMap.clearLayers();
      this.geojsonMap1.clearLayers();
      this.baseLayers.clearLayers();
    },
    initMap(v){
      this.map=v;
      this.clearLayers();
      this.baseLayers.addTo(this.map);
      this.geojsonMap.addTo(this.map);
      this.geojsonMap1.addTo(this.map);
      this.markerLayers.addTo(this.map);
      this.initCountry();
      this.map.on("click",e=>{
      })
    },
    initCountry(){
      this.country=true;
      this.clearLayers();
      this.geojsonMap=  L.geoJSON(geojson.features, {
        style:this.styleFill,
        onEachFeature: (feature, layer) => {//遍历每一个数据，也就是为每一个地点加上监听器
          layer.on({
               mouseover: this.highlightFeature,
               mouseout: this.resetHighlight,
               dblclick:this.mapClick
          });
          let name = feature.properties.name.slice(0, 2);
          let divIcon = L.divIcon({
            html: `<div style="font-size:10px;color: #fff;text-align:center">  <i class="icon iconfont icon-web-icon-" style="display:block;margin-bottom:-6px"></i><span>${name == '内蒙' || name == '黑龙' ? feature.properties.name.slice(0, 3) : name}</span></div>`,
            className: 'text-light',
            iconSize: [40, 16],
          })
            if(feature.properties.center){
                  let row =this.mapJson.find(v=>{
                    return v.code==feature.properties.adcode
                  })
                if (row) {
                  console.log(row)
                  let marker=  L.marker([feature.properties.center[1] , feature.properties.center[0]  ] , {data:row,riseOffset: 0, direction: 'left',interactive: true,  draggable: false }).setIcon(divIcon).addTo(this.baseLayers)
                  this.bindPopupCountry(marker,row);
                  marker.on("dblclick",e=>{
                    if(row.code==410000){
                      this.mapClick()
                    }
                  })
                  // L.marker([feature.properties.center[1] - 0.6, feature.properties.center[0] - 1], { riseOffset: 300,interactive: true, draggable: false }).setIcon(icon).addTo(this.baseLayers)
                }else{
                  L.marker([feature.properties.center[1] , feature.properties.center[0]  ] , {data:{},riseOffset: 0, direction: 'left',interactive: true,  draggable: false }).setIcon(divIcon).addTo(this.baseLayers)
                }
           }
        },
      }).addTo(this.geojsonMap);
      this.map.fitBounds(this.geojsonMap.getBounds());
      this.vm.$refs.gzsjznfxyjView.changeMap(this.country)
    },
    bindPopupCountry(marker,v) {
        let popupContent = "<div id='popup-" +v.code  + "' style='height:180px;'></div>";
        marker.bindPopup(popupContent, {offset: L.point(1, -10), minWidth: 300, closeButton: true});
        marker.on('popupopen', (e) => {
          console.log(1)
          new Vue({
            el: '#popup-' + v.code,
            render: h => h(vpopup, {props: {vdata: v, vm: this}})
          })
          //  this.markerClick(v,true)
        });
     },
    mapClick(e){
      this.initHnanLayer();
      this.vm.$refs.gzsjznfxyjView.changeMap(this.country)
    },
    initHnanLayer(){
        this.country=false;
        this.baseLayers1=['GaoDe.Satellite.Map','GaoDe.Satellite.Annotion'],
        this.clearLayers();
        let geojsonMap=  L.geoJSON(henanJson.features, {
          style:feature=>{
            return{
              fillColor:this.colorMap[feature.properties.adcode],
              weight: 0.5,
              opacity: 1,
              color: this.colorMap[feature.properties.adcode],
              dashArray: '0.5',
              fillOpacity:0.5,
            }
          },
          onEachFeature: (feature, layer) => {//遍历每一个数据，也就是为每一个地点加上监听器
            let name = feature.properties.name.slice(0, 2);
            let divIcon = L.divIcon({
              html: `<div style="font-size: 3px;color: #fff;text-align:center"> ${name}</div>`,
              className: 'text-light',
              iconSize: [40, 16],
            })
            if (feature.properties.center) {
              L.marker([feature.properties.center[1] , feature.properties.center[0]  ] , {riseOffset: 0, direction: 'left',interactive: true,  draggable: false }).setIcon(divIcon).addTo(this.baseLayers)
              layer.on({
                mouseover: e=>{
                    var layer = e.target;
                    layer.setStyle({
                      weight: 1,
                      dashArray: '1',
                      color: '#0723db',
                      fillOpacity:1,
                      fillColor:this.colorMap[feature.properties.adcode]||"#1CDDFF",
                    });
                    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                      layer.bringToFront();
                    }
                },
                mouseout: this.resetHighlight,
                // click:this.mapClick
              });
              let icon =  L.icon({
                  iconUrl: mapIcon,
                  iconSize: [18, 18],
              });

              // L.marker([feature.properties.center[1] - 0.6, feature.properties.center[0] - 1], { riseOffset: 300,interactive: true, draggable: false }).setIcon(icon).addTo(this.baseLayers)
            }

          },
        }).addTo(this.geojsonMap);
        let geojsonMap1=  L.geoJSON(henanJsonBounds.features, {
          style:{
            fillColor: "transparent",
            weight: 4,
            opacity: 1,
            color: '#0c01fc',
            dashArray: '1',
            fillOpacity: 0,
          },
       }).addTo(this.geojsonMap1);
      this.map.fitBounds(geojsonMap.getBounds());
      this.initMarker()
    },
    styleFill(feature){
      let row =this.mapJson.find(v=>{
        return v.code==feature.properties.adcode
      })
      console.log(row)
      return {
        fillColor:row? this.levelMap[row.level]:"#ddd",
        weight: 2,
        opacity: 1,
        color: '#0262ea',
        dashArray: '1',
        fillOpacity: 0.7,
        data: row,
      }
    },
    async  initMarker() {
      let obj={
        "01":"icon iconfont icon-yuandian colorFont",
        "02":"icon iconfont icon-yuandian colorFont1",
        "03":"icon iconfont icon-yuandian colorFont2",
        "04":"icon iconfont icon-yuandian colorFont3",
      }
      this.markerList.forEach(v => {
         let divIcon = L.divIcon({
            className: obj[v.result_level],
            iconSize: [16, 16],
          })
        let marker=  L.marker([v.v_lat, v.v_lng], { riseOffset: 300,interactive: true, draggable: false }).bindTooltip(v.org_name).openTooltip().setIcon(divIcon).addTo(this.markerLayers)
        this.bindPopup(marker,v)
      })
    },
    bindPopup(marker,v) {
      let popupContent = "<div id='popup-" +v.id  + "' style='height:180px;'>123</div>";
      marker.bindPopup(v.org_name, {offset: L.point(1, -10),  closeButton: true});
      marker.on('popupopen', (e) => {
        if(v.org_id=="411481004343")
          window.open('http://192.168.50.53:8083/LRmap/MapDisplay/IndexNew')
           // this.outerVisible=true;
      });
    },
    //公共样式
    resetHighlight(e) {//当鼠标退出后reset
      var layer = e.target;
      layer.closePopup();
      this.geojsonMap.resetStyle(e.target);//  geojson要先定义
    },
    highlightFeature(e) {//当鼠标拂过时高亮显示
      var layer = e.target;
      layer.openPopup();
      layer.setStyle({
        weight: 3,
        dashArray: '',
        color: '#0723db',
        fillOpacity: 0.9,
        fillColor: "#1CDDFF"
      });
      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }
    },
    mapFillColor(feature,) {
      return {
        fillColor: this.getColor(feature.properties.adcode).color,
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '1',
        fillOpacity: 0.7,
        data: this.getColor(feature.properties.adcode).data
      }
    },
  }
}
</script>
<style lang="less">
  .iconMap{
    width: 2vw;
    height: 2vw;
  }
  .country-title {
      z-index: 999;
      position: absolute;
      height: 25px;
      width: 300px;
      top: 11px;
      /*left: 50px;*/
      color: white;
      .nameTabs{
          list-style: none;
          overflow: hidden;
          font: 12px Sans-Serif;
          margin: 0;
          li{
            float: left;
            a{
                color: #fff;
                text-decoration: none;
                padding: 2px 0 2px 35px;
                background: #024795;
                position: relative;
                display: block;
                float: left;
            }
          }
          li:first-child a{
               padding-left: 10px;
          }
          li a:before{
              border-left: 15px solid #fff;
            margin-left: 1px;
            z-index: 1;
          }
         li a:after, li a:before{
           content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 50px solid transparent;
                border-bottom: 50px solid transparent;
                position: absolute;
                top: 50%;
                margin-top: -50px;
                left: 100%;
         }
        li a:after {
          border-left: 15px solid #024795;
          z-index: 2;
        } 
      }
      .score {
          color: #ff0000;
      }
      .score_unit {
          color: white;
          font-size: 16px;
          width: 30px;
      }
  }
  .mapIndex{
    width: 100vw;
    height: 100vh;
    background: url("../../../public/images/indexBanner.png") no-repeat;
    background-size: 100%  100%;
    position: relative;

    .list{
      z-index: 1000;
      position: absolute;
      background: url("../../../public/images/bj1.png") no-repeat;
      padding: 1vh 0  1vh 0.5vh;
      background-size: 100% 100%;
      width: 11vw;
      left: 29vw;
      top: 11vh;
      color: #fff;
      .colorList{
        font-size: 1.2vh;
        padding-left: 0.5vw;
        padding-bottom: 0.5vh;
      }
      .iconColor{
        display: inline-block;
        width: 0.4vw;
        height: 0.4vw;
        border-radius: 80%;
      }
      .level1{
        background: #fb0d0dFF;
      }
      .level2{
        background: #fe9c00FF;
      }
      .level3{
        background: #ffdc6aFF;
      }
      .level4{
        background: #0d5afbFF;
      }
      .row{
        cursor: pointer;
        line-height: 2vh;
        font-size:1.2vh;
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        color: #fff;
        .icon{

          padding-right: 0.5vw;
        }
      }
      .row.active{
        background: url("../../../public/images/bj.png") no-repeat;
      }
      .row:hover{
        background: url("../../../public/images/bj.png") no-repeat;
      }
    }
  }
  .changeButton{
    position: absolute;
    right: 42vw;
    z-index: 1000;
    top: 2vh;
    .levelDiv{
      width:7vw;
      height:5.5vh;
      background:url("../../../public/images/Tai_di.png") no-repeat;
      background-size: 100% 100%;
      color: #23EDFF;
      text-align: center;
      float: left;
      line-height: 2.5vh;
      margin-top: 0.5vh;
      margin-right: 0.2vw;
      padding-top: 0.8vh;
    }
    .buttonDiv.active{
      // background:url("../../../public/images/Tai_dian.png") no-repeat;
      background: url("../../../public/images/indexBanner.png") no-repeat;
      background-size: 100% 100%;
    }
  }
 .changeButton1{
    left: 63vh;
    width: 6vw;
    top: 70vh;
    height: 11vh;
    background: url("/vae/images/bj2.png") no-repeat;
    background-size: 100% 100%;
    padding: 1vh;
    line-height: 2.3vh;
    .lenged{
      font-size: 12px;
      color: #fff;
      .color{
          display: inline-block;
          width: 12px;
          height: 12px;
          margin-right: 10px;
      }
      .color1{background: #db2d2d;}
      .color2{background: #fc7500;}
      .color3{background: #e3ca21;}
      .color4{background: #00b4ff;}
      .color5{background: #929292;}
    }
  }
  .changeButton2{
    top: 2vh;
    left: 63vh;
  }
  .colorFont{color: #db2d2d;}
  .colorFont1{color: #fc7500;}
  .colorFont2{color: #e3ca21;}
  .colorFont3{color: #00b4ff;}
  .colorFont4{color: #929292;}
  .ifarmDia{
    .el-dialog{
          width: 100vw;
           height: 100vh;
          margin: 0 !important;
          padding:  0 !important;
          .el-dialog__header{
            margin: 0 !important;
            padding:  0 !important;
          }
         
         .el-dialog__body{
            height: 100%;
            position: relative;
            width: 100%;
            margin: 0 !important;
          padding:  0 !important;
          .closeButton{
              position: absolute;
              right: 2vw;
              top: 2vh;
          }
         }
      }
  }
</style>
<style>
.mkCircular{
    width: 14px;
    height: 14px;
    background: #0f14b1;
    border-radius: 50%;
    border: 1px solid #030aff;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background: transparent;
  background: url("../../../public/images/panel_bg2.png") no-repeat;
  background-size: 100% 100%;
  box-shadow:none;
  color: #FFF8DC;

}

</style>
